<template>
  <div class="wrap">
    <x-header title="个人资料"></x-header>
    <div class="wrapper" ref="wrapper">
        <ul class="content">
          <group title="用户信息" label-width="5.5em" label-margin-right="2em" label-align="justify">
            <x-input title="登陆账号" v-model="user.userName" disabled></x-input>
            <x-input title="姓名" v-model="user.name"></x-input>
            <x-input title="手机号" v-model="user.phoneNumber" ></x-input>
            <x-input title="开户银行" v-model="user.bank"></x-input>
            <x-input title="银行卡号" v-model="user.bankCardNumber"></x-input>
            <x-input title="身份证号" v-model="user.identityCard" :is-type="validateIdcard" disabled></x-input>
            <x-textarea title="联系地址" v-model="user.address" placeholder="请填写联系地址" :show-counter="false" :rows="3"></x-textarea>
          </group>
          <x-button type="primary" action-type="button" @click.native="preservation">保存</x-button>
        </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { XHeader, Group, XTextarea, XInput, XButton } from 'vux'
import { ValidateIdcard, GetBaseUserInfo, Update } from '@/api/user'
export default {
  components: {
    XHeader,
    Group,
    XInput,
    XButton,
    XTextarea
  },
  data() {
    return {
      user: {
        userName: '',
        name: '',
        phoneNumber: '',
        emailAddress: '',
        bank: '',
        bankCardNumber: '',
        identityCard: '',
        address: ''
      },
      validateIdcard: ValidateIdcard
    }
  },
  mounted() {
    // 滚动
    this.scroll = new BScroll(this.$refs.wrapper, { click: true })
  },
  methods: {
    preservation() {
      var _this = this
      Update(_this.user).then(result => {
        console.log(result)
      }).catch(response => {
      })
    },
    getUserInfo() {
      var _this = this
      GetBaseUserInfo({ id: 0 }).then(result => {
        console.log(result)
        _this.user = result.data
      })
    }
  },
  created() {
    this.getUserInfo()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.wrap{
  height: 100%;
  .vux-header{
    z-index: 2;
  }
  .wrapper{
    height: calc(100% - 58px);
    border-top: 1px solid #ffffff;
    button.weui-btn{
      width: 80%;
    }
  }
}
</style>
